import React, { useState } from 'react'
import { Table, Space, Modal, Button, Form, Input, Radio } from 'antd';
import './css/DataList.scss'

export default function DataList() {
    const data1 = [{
        id: 1,
        company_name: '江苏昆山农村商业银行股份有限公司',
        area: '江苏省昆山市',
        rank: 'A级放款渠道',
        contact_person: '李小红',
        contact_phone: 15315130950,
        source: '手动创建',
        channel_creation_time: '2018-08-25 14:54',
        statu: 1
    },
    {
        id: 2,
        company_name: '西安百金互联网金融资产交易中心有限公司',
        area: '陕西西安',
        rank: 'A级放款渠道',
        contact_person: '李小红',
        contact_phone: 15315130950,
        source: '手动创建',
        channel_creation_time: '2018-08-25 14:54',
        statu: 1
    },
    {
        id: 3,
        company_name: '西安百金互联网金融资产交易中心有限公司',
        area: '陕西西安',
        rank: 'A级放款渠道',
        contact_person: '李小红',
        contact_phone: 15315130950,
        source: '手动创建',
        channel_creation_time: '2018-08-25 14:54',
        statu: 1
    },]
    const [dataList, setDataList] = useState([...data1])
    const [isModalVisible1, setIsModalVisible1] = useState(false);
    const [isModalVisible2, setIsModalVisible2] = useState(false);
    const handleOk1 = () => {
        let list = dataList
        list.forEach(item => {
                if(item.id === selectItem.id) {
                item.statu = 3
                }
            })
        setIsModalVisible1(false);
      };
    const handleOk2 = () => {
        setDataList(
            dataList.filter(item => item.id !== selectItem.id)
        )
        setIsModalVisible2(false);
      };
    const handleCancel1 = () => {
        setIsModalVisible1(false);
      };
    const handleCancel2 = () => {
        setIsModalVisible2(false);
      };
    const [selectItem, setSelectItem] = useState('')
    const handleForbidden = (record) => {
        setIsModalVisible1(true);
        setSelectItem(record)
    }
    const handleDelete = (record) => {
        setIsModalVisible2(true);
        setSelectItem(record)
    }
    const [isModalVisible4, setIsModalVisible4] = useState(false);
    const [selectItem2, setSelectItem2] = useState('')
    const [form4] = Form.useForm();
    const handleOpen = (record) => {
        setIsModalVisible4(true);
        setSelectItem2(record)
        console.log(selectItem2)
    }
    const handleCancel4 = () => {
        setIsModalVisible4(false);
      };
    const onReset4 = () => {
        form4.resetFields();
      };
    const columns = [
        {
            title: '公司名称',
            dataIndex: 'company_name',
            key: 'company_name',
            width: 140,
            render: (text, record) => (
                <Space size="middle">
                  <a onClick={() => handleOpen(record)}>{record.company_name}</a>
                  <Modal title="新增渠道" visible={isModalVisible4} footer={null} onCancel={handleCancel4} width={1000}>
                        <Form form={form4} name="control-hooks" layout="vertical" >
                            <div className='title3'>基础信息</div>
                            <div className='search-box1'>
                            <div className='search'>
                            <div className='form-left'>
                                <Form.Item name="company_name" label="公司名称" style={{width: 200}} rules={[{required: true}]}>
                                    <Input placeholder='请填写公司名称' />
                                </Form.Item>
                                <Form.Item name="contact_phone" label="手机号码" style={{width: 200}} rules={[{required: true}]}>
                                    <Input placeholder='请填写手机号码' />
                                </Form.Item>
                                <Form.Item name="backend_domain_names" label="管理后台域名" style={{width: 200}} rules={[{required: true}]}>
                                    <Input placeholder='请自定义后台管理域名（4-10个英文字母）' />
                                </Form.Item>
                            </div>
                            <div className='form-middle'>
                                <Form.Item name="type_trade" label="行业类型" style={{width: 200}} rules={[{required: true}]}>
                                    <Input placeholder='请填写行业类型'/>
                                </Form.Item>
                                <Form.Item name="contact_person" label="业务联系人" style={{width: 200}} rules={[{required: true}]}>
                                    <Input placeholder='请填写联系人'/>
                                </Form.Item>
                                <Form.Item name="qq" label="QQ" style={{width: 200}}>
                                    <Input placeholder='请填写QQ'/>
                                </Form.Item>
                            </div>
                            <div className='form-right'>
                                <Form.Item name="area" label="所在区域" style={{width: 200}} rules={[{required: true}]}>
                                    <Input placeholder='用户姓名'/>
                                </Form.Item>
                                <Form.Item name="contact_position" label="职位" style={{width: 200}}>
                                    <Input placeholder='请填写职位'/>
                                </Form.Item>
                                <Form.Item name="contact_email" label="邮箱" style={{width: 200}}>
                                    <Input placeholder='请填写邮箱'/>
                                </Form.Item>
                            </div>
                            </div>
                            </div>
                            <div className='title3'>公司详情</div>
                            <div className='search-box1'>
                            <div className='search'>
                            <div className='form-left'>
                                <Form.Item name="company_name" label="公司名称" style={{width: 200}} rules={[{required: true}]}>
                                    <div className='logo'>上传图片</div>
                                </Form.Item>
                            </div>
                            <div className='form-middle'>
                                <Form.Item name="region" label="详细地址" style={{width: 200}} rules={[{required: true}]}>
                                    <Input placeholder='请填写详细地址'/>
                                </Form.Item>
                                <Form.Item name="faxed" label="传真" style={{width: 200}}>
                                    <Input placeholder='请填写传真'/>
                                </Form.Item>
                            </div>
                            <div className='form-right'>
                                <Form.Item name="phone" label="电话" style={{width: 200}} rules={[{required: true}]}>
                                    <Input placeholder='请填写电话'/>
                                </Form.Item>
                                <Form.Item name="web_wite" label="网址" style={{width: 200}}>
                                    <Input placeholder='请填写网址'/>
                                </Form.Item>
                            </div>
                            </div>
                            </div>
                            <div className='btn1'>
                            <Form.Item>
                                <Space>
                                    <Button type="primary" htmlType="submit">提交</Button>
                                    <Button htmlType="button" onClick={onReset4}>重置</Button>
                                </Space>
                            </Form.Item>
                            </div>
                            </Form>
                    </Modal>
                </Space>
              ),
        },
        {
            title: '所在地区',
            dataIndex: 'area',
            key: 'area',
            width: 120
        },
        {
            title: '级别',
            dataIndex: 'rank',
            key: 'rank',
            width: 120
        },
        {
            title: '联系人',
            dataIndex: 'contact_person',
            key: 'contact_person',
            width: 120
        },
        {
            title: '联系方式',
            dataIndex: 'contact_phone',
            key: 'contact_phone',
            width: 120
        },
        {
            title: '来源',
            dataIndex: 'source',
            key: 'source',
            width: 120
        },
        {
            title: '创建时间',
            dataIndex: 'channel_creation_time',
            key: 'channel_creation_time',
            width: 140
        },
        {
            title: '状态',
            dataIndex: 'statu',
            key: 'statu',
            width: 120,
            render: (text, record) => {
                if(record.statu===1){
                    return (
                        <span>已开通</span>
                    )
                } if(record.statu===2){
                    return (
                        <span>未开通</span>
                    )
                } if(record.statu===3){
                  return (
                      <span>禁用</span>
                  )
              } if(record.statu===4){
                return (
                    <span>删除</span>
                )
            }
            }
          },
        {
          title: '操作',
          dataIndex: 'operate',
          key: 'operate',
          width: 120,
          render: (text,record) => (
            <Space size="middle">
              <a onClick={() => handleForbidden(record)}>禁用</a>
                <Modal title="确认提示" visible={isModalVisible1} onOk={handleOk1} onCancel={handleCancel1} okText="确认"
          cancelText="取消">
                    <p>是否确定禁用合作渠道？</p>
                </Modal>
              <a onClick={() => handleDelete(record)}>删除</a>
                <Modal title="确认提示" visible={isModalVisible2} onOk={handleOk2} onCancel={handleCancel2} okText="确认"
          cancelText="取消">
                    <p>是否确定删除合作渠道？</p>
                </Modal>
            </Space>
          ),
        }
    ]
    const [form] = Form.useForm();
    const [isModalVisible3, setIsModalVisible3] = useState(false)
    const handleCancel3 = () => {
        setIsModalVisible3(false);
      };
      const onReset = () => {
        form.resetFields();
      };
    const add = () => {
        setIsModalVisible3(true);
    }
    return (
        <div className='datalist'>
            <div className='title1'>
                <span className='title2'>数据列表</span>
                <Button type="primary" className='btn' onClick={add}>添加</Button>
                <Modal title="新增渠道" visible={isModalVisible3} footer={null} onCancel={handleCancel3} width={1000}>
                        <Form form={form} name="control-hooks" layout="vertical">
                            <div className='title3'>基础信息</div>
                            <div className='search-box1'>
                            <div className='search'>
                            <div className='form-left'>
                                <Form.Item name="company_name" label="公司名称" style={{width: 200}} rules={[{required: true}]}>
                                    <Input placeholder='请填写公司名称'/>
                                </Form.Item>
                                <Form.Item name="contact_phone" label="手机号码" style={{width: 200}} rules={[{required: true}]}>
                                    <Input placeholder='请填写手机号码' />
                                </Form.Item>
                                <Form.Item name="backend_domain_names" label="管理后台域名" style={{width: 200}} rules={[{required: true}]}>
                                    <Input placeholder='请自定义后台管理域名（4-10个英文字母）' />
                                </Form.Item>
                            </div>
                            <div className='form-middle'>
                                <Form.Item name="type_trade" label="行业类型" style={{width: 200}} rules={[{required: true}]}>
                                    <Input placeholder='请填写行业类型'/>
                                </Form.Item>
                                <Form.Item name="contact_person" label="业务联系人" style={{width: 200}} rules={[{required: true}]}>
                                    <Input placeholder='请填写联系人'/>
                                </Form.Item>
                                <Form.Item name="qq" label="QQ" style={{width: 200}}>
                                    <Input placeholder='请填写QQ'/>
                                </Form.Item>
                            </div>
                            <div className='form-right'>
                                <Form.Item name="area" label="所在区域" style={{width: 200}} rules={[{required: true}]}>
                                    <Input placeholder='用户姓名'/>
                                </Form.Item>
                                <Form.Item name="contact_position" label="职位" style={{width: 200}}>
                                    <Input placeholder='请填写职位'/>
                                </Form.Item>
                                <Form.Item name="contact_email" label="邮箱" style={{width: 200}}>
                                    <Input placeholder='请填写邮箱'/>
                                </Form.Item>
                            </div>
                            </div>
                            </div>
                            <div className='title3'>公司详情</div>
                            <div className='search-box1'>
                            <div className='search'>
                            <div className='form-left'>
                                <Form.Item name="company_name" label="公司名称" style={{width: 200}} rules={[{required: true}]}>
                                    <div className='logo'>上传图片</div>
                                </Form.Item>
                            </div>
                            <div className='form-middle'>
                                <Form.Item name="region" label="详细地址" style={{width: 200}} rules={[{required: true}]}>
                                    <Input placeholder='请填写详细地址'/>
                                </Form.Item>
                                <Form.Item name="faxed" label="传真" style={{width: 200}}>
                                    <Input placeholder='请填写传真'/>
                                </Form.Item>
                            </div>
                            <div className='form-right'>
                                <Form.Item name="phone" label="电话" style={{width: 200}} rules={[{required: true}]}>
                                    <Input placeholder='请填写电话'/>
                                </Form.Item>
                                <Form.Item name="web_wite" label="网址" style={{width: 200}}>
                                    <Input placeholder='请填写网址'/>
                                </Form.Item>
                            </div>
                            </div>
                            </div>
                            <div className='btn1'>
                            <Form.Item>
                                <Space>
                                    <Button type="primary" htmlType="submit">提交</Button>
                                    <Button htmlType="button" onClick={onReset}>重置</Button>
                                </Space>
                            </Form.Item>
                            </div>
                            </Form>
                    </Modal>
            </div>
            <Table scroll={{ x: 1500 }} rowKey={(record) => record.id} dataSource={dataList} columns={columns} pagination={{pageSize:5, total: 100, showSizeChanger:false}}/>
        </div>
    )
}


